<template>
    <div ref="maindev">
        <div class="pagetop" :style="pagetopstyle">
            <div style="width: 100%">
                <table>
                    <tr>
                        <td>采样日期</td>
                        <td>
                            <el-date-picker v-model="datetime1" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 175px" :clearable="false"> </el-date-picker>
                            -
                            <el-date-picker v-model="datetime2" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 175px" :clearable="false"> </el-date-picker>
                        </td>
                        <td>病人类型</td>
                        <td>
                            <el-select v-model="pattype" @dblclick.native="popMultipleChk(pattype, 'pattype', pattypeOption, '病人类型选择')" filterable clearable style="width: 100%">
                                <el-option v-for="(item, index) in pattypeOption" :value="item.data" :label="item.display" :key="index"></el-option>
                            </el-select>
                        </td>
                        <td>病人姓名</td>
                        <td>
                            <el-input v-model="patname" ref="patname" style="width: 100%" clearable></el-input>
                        </td>
                        <td>报告单元</td>
                        <td>
                            <el-select v-model="rptunitid" @dblclick.native="popMultipleChk(rptunitid, 'rptunitid', rptunitOption, '请选择报告单元')" filterable clearable style="width: 100%">
                                <el-option v-for="(item, index) in rptunitOption" :key="index" :value="item.data" :label="item.display"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">条码编号</td>
                        <td>
                            <el-input v-model="barcode" style="width: 100%" ref="reftxtbarcode" clearable></el-input>
                        </td>

                        <td>分单类别</td>
                        <td>
                            <el-select v-model="reqgroupid" @dblclick.native="popMultipleChk(reqgroupid, 'reqgroupid', reqgroupOption, '分单类别选择')" filterable clearable style="width: 100%">
                                <el-option v-for="(item, index) in reqgroupOption" :value="item.data" :label="item.display" :key="index"></el-option>
                            </el-select>
                        </td>
                        <td>执行科室</td>
                        <td>
                            <rm-ddl-common datatype="dept" dataname="执行科室" v-model="performdept" width="100%"></rm-ddl-common>
                        </td>
                        <td>标本类型</td>
                        <td>
                            <rm-ddl-common datatype="specimen" dataname="标本类型" v-model="specimencode" width="100%"></rm-ddl-common>
                        </td>
                    </tr>
                    <tr v-show="showmoreflag">
                        <td>申请项目组合</td>
                        <td>
                            <rm-ddl-common datatype="reqitemcomb" dataname="申请项目组合" v-model="reqcombid" width="100%"></rm-ddl-common>
                        </td>
                        <td>申请项目</td>
                        <td>
                            <el-select v-model="reqitem" @dblclick.native="popMultipleChk(reqitem, 'reqitem', reqitemOption, '申请项目选择')" style="width: 100%" filterable clearable>
                                <el-option v-for="(item, index) in reqitemOption" :key="index" :value="item.data" :label="item.display"> </el-option>
                            </el-select>
                        </td>
                        <td>检验医院</td>
                        <td>
                            <rm-ddl-common datatype="hospital" dataname="检验医院" v-model="labhospital" width="100%"></rm-ddl-common>
                        </td>
                        <td colspan="6" align="left">
                            <el-checkbox v-model="emerflag" false-label="0" true-label="1">仅显示加急标本</el-checkbox>
                        </td>
                    </tr>
                    <tr v-show="showmoreflag">
                        <td>分单类别组合</td>
                        <td>
                            <rm-ddl-common datatype="groupcombid" dataname="分单类别组合" v-model="groupcombid" width="100%" ></rm-ddl-common>
                        </td>
                        <td @click="showhelp('grouplabdept')">检验科室<span style="color:blue" class="el-icon-info"></span></td>
                        <td>
                            <rm-ddl-common datatype="labdept" dataname="检验科室" v-model="labdept" width="100%"></rm-ddl-common>
                        </td>
                    </tr>
                </table>
                <div style="width: 100%; text-align: right; padding-bottom: 5px">
                    <el-link :underline="false" @click="OpenMoreSel">{{ showmoreflag ? "收起▲" : "展开▼" }}</el-link>
                    <el-button type="primary" icon="el-icon-search" v-has="'PINQUERY'" @click="QueryData()">查询</el-button>
                    <el-button icon="el-icon-upload2" @click="btnExportCsv">导出</el-button>
                </div>
            </div>
        </div>
        <div class="pagecenter" :style="pagecenter">
            <rm-layout-right :fixsize="520" :splitwidth="5" :minfixsize="200" :maxflxsize="2000">
                <div :style="middle_center">
                    <vxe-table :data.sync="tableData" :loading="loading" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border :height="reportheight" header-align="center" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow ref="maintable" resizable size="mini" :optimization="{ animat: false }" @current-change="DataSelect">
                        <vxe-table-column field="pat_typename" title="病人类型" width="80" show-overflow align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_groupna" title="分单类别" width="80" show-overflow align="center"></vxe-table-column>
                        <vxe-table-column field="create_dt" align="center" title="创建时间" width="125" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="create_username" align="center" title="创建人" width="80" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="sampled_dt" align="center" title="采样时间" width="125" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="sampled_username" title="采样人" width="80" align="center" show-overflow></vxe-table-column>
                        <vxe-table-column field="barcode" title="条码号" width="107" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="emer_flag" title="加急" width="40px" align="center" sortable>
                            <template v-slot="{ row }">
                                <span style="color: red" v-if="row.emer_flag == '1'">急</span>
                                <span v-else></span>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="sample_items" title="申请项目（简称，部分）" width="180px" show-overflow></vxe-table-column>
                        <vxe-table-column field="req_deptname" title="申请科室" width="110" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="perform_deptname" title="执行科室" width="110" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="req_statname" title="状态" width="90" align="center" show-overflow></vxe-table-column>
                        <vxe-table-column field="pat_name" title="姓名" width="80" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="pat_sexname" title="性别" width="40px" align="center" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="pat_agestr" title="年龄" width="80px" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="pat_birth" title="生日" width="125" show-overflow></vxe-table-column>
                        <vxe-table-column field="pat_no" title="病历号" width="80" show-overflow></vxe-table-column>
                        <vxe-table-column field="req_bedno" title="床号" width="80" show-overflow></vxe-table-column>
                        <vxe-table-column field="specimen_codename" title="标本类型" width="100" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="print_dt" title="打印/执行时间" width="125px" show-overflow></vxe-table-column>
                        <vxe-table-column field="print_username" align="center" title="打印/执行人" width="90" show-overflow></vxe-table-column>
                        <vxe-table-column field="req_docname" title="申请医生" width="80" show-overflow sortable></vxe-table-column>
                        <vxe-table-column field="req_dt" title="申请时间" align="center" width="125" show-overflow></vxe-table-column>
                        <vxe-table-column field="prereport_dt" align="center" title="预出报告时间" width="140" show-overflow></vxe-table-column>
                        <vxe-table-column field="charge_dt" title="计价时间" width="120" show-overflow></vxe-table-column>
                        <vxe-table-column field="charge_username" align="center" title="计价人" width="85" show-overflow></vxe-table-column>
                        <vxe-table-column field="amount" title="实收金额" width="60px" show-overflow></vxe-table-column>
                        <vxe-table-column field="charge_flag" title="计价标志" width="70" show-overflow></vxe-table-column>
                        <vxe-table-column field="charge_typename" title="费别代码" width="100" show-overflow></vxe-table-column>
                        <vxe-table-column field="req_wardname" align="center" title="病区" width="100" show-overflow></vxe-table-column>
                        <vxe-table-column field="original_reqno" title="原始申请单号" width="125" show-overflow></vxe-table-column>
                        <vxe-table-column field="reqtype" align="center" title="申请单类别" width="100" show-overflow></vxe-table-column>
                        <vxe-table-column field="req_comm" title="医生备注" width="130" show-overflow></vxe-table-column>
                        <vxe-table-column field="report_comm" title="报告备注" width="100" show-overflow></vxe-table-column>
                    </vxe-table>
                </div>
                <template v-slot:fix>
                    <rm-layout-top splitcolor="white" :splitwidth="5" :fixsize="200">
                        <div style="height: 100%">
                            <vxe-table :data.sync="tableDatalog" :loading="loadinglog" height="auto" highlight-current-row highlight-hover-row resizable header-align="center" show-overflow="tooltip" show-header-overflow="tooltip" size="mini" border stripe column-width="100px" ref="tablelog">
                                <vxe-table-column field="log_date" title="操作日期" width="120px" align="center"></vxe-table-column>
                                <vxe-table-column field="transname" title="操作类型" width="80px" align="center"></vxe-table-column>
                                <vxe-table-column field="log_content" title="操作内容" width="200px"></vxe-table-column>
                                <vxe-table-column field="username" title="操作者" width="100px" align="center"></vxe-table-column>
                                <vxe-table-column field="ref_user" title="相关人" width="100px"></vxe-table-column>
                                <vxe-table-column field="labgroupid" title="工作组" width="100px"></vxe-table-column>
                                <vxe-table-column field="computer_name" title="操作时机器名" width="100px">
                                    <template v-slot="{ row }">
                                        <span style="color:blue;">{{row.computer_name}}</span>
                                        <i class="el-icon-refresh" @click="repalceComputerName(row)"></i>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="mac_address" title="操作时机器MAC" width="100px"></vxe-table-column>
                                <vxe-table-column field="syncflag" title="同步HIS标志" width="100px"></vxe-table-column>
                                <vxe-table-column field="synctime" title="同步时间" width="100px"></vxe-table-column>
                                <vxe-table-column field="syncerrtext" title="同步失败信息" width="100px"></vxe-table-column>
                            </vxe-table>
                        </div>
                        <template v-slot:fix>
                            <div style="height: 100%">
                                <vxe-table :data.sync="tableDatareq" :loading="loadingreq" height="auto" highlight-current-row highlight-hover-row resizable header-align="center" show-overflow="tooltip" show-header-overflow="tooltip" size="mini" border stripe column-width="100px" ref="tablereq">
                                    <vxe-table-column field="req_itemname" title="项目名称" width="160px"></vxe-table-column>
                                    <vxe-table-column field="item_price" title="实际价格" width="100px" align="right" header-align="center"></vxe-table-column>
                                    <vxe-table-column field="qty" title="数量" width="80px" align="right" header-align="center"></vxe-table-column>
                                    <vxe-table-column field="amount" title="金额" width="100px" text-align="center" align="right" header-align="center"></vxe-table-column>
                                    <vxe-table-column field="seq" title="序号" width="60px"></vxe-table-column>
                                    <vxe-table-column field="base_price" title="基础价格" width="80px"></vxe-table-column>
                                    <vxe-table-column field="req_itemcode" title="项目代码" width="100px"></vxe-table-column>
                                    <vxe-table-column field="his_itemcode" title="HIS项目代码" width="100px"></vxe-table-column>
                                    <vxe-table-column field="his_recordid" title="HIS记录号" width="100px"></vxe-table-column>
                                    <vxe-table-column field="parent_itemcode" title="上级项目" width="100px"></vxe-table-column>
                                    <vxe-table-column field="combitemna" title="所属组合项目简称" width="100px"></vxe-table-column>
                                    <vxe-table-column field="stat_flag" title="统计标志" width="100px"></vxe-table-column>
                                    <vxe-table-column field="other_flag" title="其它标志" width="100px"></vxe-table-column>
                                    <vxe-table-column field="status" title="状态" width="80px"></vxe-table-column>
                                    <vxe-table-column field="reportid" title="报告ID" width="100px"></vxe-table-column>
                                    <vxe-table-column field="lab_add" title="实验室新增" width="80px"></vxe-table-column>
                                    <vxe-table-column field="add_dt" title="新增时间" width="100px"></vxe-table-column>
                                    <vxe-table-column field="add_user" title="新增人" width="100px"></vxe-table-column>
                                    <vxe-table-column field="req_groupid" title="分单类别ID" width="100px"></vxe-table-column>
                                    <vxe-table-column field="his_refcol1" title="HIS表相关字段1" width="100px"></vxe-table-column>
                                    <vxe-table-column field="his_refcol2" title="HIS表相关字段2" width="100px"></vxe-table-column>
                                    <vxe-table-column field="his_refcol3" title="HIS表相关字段3" width="100px"></vxe-table-column>
                                    <vxe-table-column field="emer_flag" title="急诊标志" width="100px"></vxe-table-column>
                                    <vxe-table-column field="charge_flag" title="计价标志" width="100px"></vxe-table-column>
                                    <vxe-table-column field="hospreqitemcode" title="外送医院项目代码" width="100px"></vxe-table-column>
                                </vxe-table>
                            </div>
                        </template>
                    </rm-layout-top>
                </template>
            </rm-layout-right>
        </div>

        <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
            <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"></rm-SqlMultiple>
        </el-dialog>
    </div>
</template>

<script>
import XEUtils from "xe-utils"; //引入工具类
export default {
    name: "LIS242",
    data() {
        return {
            pagetopstyle: {
                position: "absolute",
                height: "100px",
                width: "100%",
            },
            pagecenter: {
                position: "absolute",
                top: "140px",
                bottom: "0px",
                overflow: "auto",
                width: "100%",
                left: "0px",
            },
            middle_center: {
                position: "absolute",
                height: "100%",
                right: "0px",
                left: "0px",
                overflow: "auto",
            },
            datetime1: "",
            datetime2: "",
            pattype: "", //病人类型
            reqgroupid: "", //分单类别
            showmoreflag: false, //显示更多标志
            reportheight: "auto",
            reqitem: "",
            rptunitid: "",
            reqcombid: "", //申请项目组合
            labhospital: "", //检验医院
            performdept: "", //执行科室
            specimencode: "",
            patname: "", //病人姓名
            barcode: "",
            emerflag: "0",
            hospOption: [],

            deptOption: [],

            pattypeOption: [],
            reqgroupOption: [],
            reqitemOption: [],

            rptunitOption: [],
            tableData: [],
            loading: false,
            tableDatareq: [],
            loadingreq: false,
            tableDatalog: [],
            loadinglog: false,
            selrow: {},
            //多选弹窗
            dialogMultipleVisible: false,
            option1: [],
            option2: [],
            fieldname: "",
            multichktitle: "",
            groupcombid: "",
            labdept: "",
        };
    },
    created() {
        this.QueryOption();
    },
    updated() {},
    methods: {
        OpenMoreSel() {
            let mainheight = this.$refs.maindev.offsetHeight;
            this.showmoreflag = !this.showmoreflag;
            if (this.showmoreflag) {
                this.pagetopstyle.height = "160px";
                this.pagecenter.top = "200px";
                this.reportheight = mainheight - 200;
                // if (this.is_ym) {
                //     this.ymresultheight = mainheight - 373;
                // } else {
                //     this.resultheight = mainheight - 175;
                // }
            } else {
                this.pagetopstyle.height = "100px";
                this.pagecenter.top = "140px";
                this.reportheight = mainheight - 140;
                // if (this.is_ym) {
                //     this.ymresultheight = mainheight - 343;
                // } else {
                //     this.resultheight = mainheight - 110;
                // }
            }
        },
        popMultipleChk(e, fieldname, option, title) {
            let temp = XEUtils.clone(option, true);
            this.option1 = [];
            this.option2 = [];
            if (e != "") {
                let k = e.split(",");
                k.forEach((item) => {
                    let ndata = temp.find((m) => m.data == item);
                    if (ndata != undefined && ndata != null) {
                        this.option2.push(ndata);
                    }
                });
                temp.forEach((item) => {
                    if (k.indexOf(item.data + "") < 0) {
                        this.option1.push(item);
                    }
                });
            } else {
                this.option1 = temp;
            }
            this.fieldname = fieldname;
            this.multichktitle = title;
            this.dialogMultipleVisible = true;
        },
        closedialog(value, name) {
            if (value != "close") {
                this[name] = value;
            }
            this.dialogMultipleVisible = false;
        },
        QueryOption() {
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS242",
                    method: "post",
                    data: {
                        action: "initOption",
                    },
                })
                .then((res) => {
                    this.pattypeOption = res.pattypeOption;
                    this.deptOption = res.deptOption;
                    this.hospOption = res.hospOption;
                    this.rptunitOption = res.rptunitOption;
                    this.reportcommOption = res.reportcommOption;
                    this.reqgroupOption = res.reqgroupOption;
                    this.reqitemOption = res.reqitemOption;
                    this.datetime1 = res.datetime + " 00:00:00";
                    this.datetime2 = res.datetime + " 23:59:59";
                });
        },
        QueryData() {
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS242",
                    method: "post",
                    data: {
                        action: "querybarcode",
                        barcode: this.barcode,
                        datetime1: this.datetime1,
                        datetime2: this.datetime2,
                        rptunit: this.rptunitid,
                        reqitem: this.reqitem,
                        reqcombid: this.reqcombid,
                        pattype: this.pattype,
                        hospcode: this.labhospital,
                        peformedeptno: this.performdept,
                        specimencode: this.specimencode,
                        emerflag: this.emerflag,
                        patname: this.patname,
                        reqgroupid:this.reqgroupid,
                        groupcombid: this.groupcombid,
                        labdept: this.labdept,
                    },
                })
                .then((res) => {
                    this.tableData = res.data;
                    if (res.data.length > 0) {
                        this.$nextTick(() => {
                            this.$refs.maintable.setCurrentRow(this.tableData[0]);
                            this.selrow = this.tableData[0];
                            this.QueryReq(this.tableData[0].barcode);
                            this.QueryLog(this.tableData[0].barcode);
                        });
                    } else {
                        this.tableData = [];
                        this.tableDatareq = [];
                        this.tableDatalog = [];
                    }
                });
        },
        QueryReq(barcode) {
            this.loadingreq = true;
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS242",
                    method: "post",
                    data: {
                        action: "queryreqitem",
                        barcode: barcode,
                    },
                })
                .then((res) => {
                    this.tableDatareq = res.Data;
                    this.loadingreq = false;
                })
                .catch((err) => {
                    this.loadingreq = false;
                });
        },
        QueryLog(barcode) {
            this.loadinglog = true;
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS242",
                    method: "post",
                    data: {
                        action: "querylog",
                        barcode: barcode,
                    },
                })
                .then((res) => {
                    this.tableDatalog = res.Data;
                    this.loadinglog = false;
                })
                .catch((err) => {
                    this.loadinglog = false;
                });
        },
        DataSelect({ row, rowIndex }) {
            this.selrow = row;
            this.QueryReq(row.barcode);
            this.QueryLog(row.barcode);
        },
        btnExportCsv() {
            //导出
            this.$refs.maintable.exportCsv({
                filename: "LIS242 标本采样未签收信息",
            });
        },
        repalceComputerName(row) {
            this.$pub.getComputerName(row.mac_address)
                .then((name)=> {
                    row.computer_name = name;
                })
                .catch(()=> {
                    this.$message.error("机器名称查询失败！");
                    //保持原样
                });
        },
        showhelp(t){
            this.$pub.showhelp(this, t);
        },
    },
};
</script>

<style scoped>
table tr td:nth-child(odd) {
    text-align: right;
    white-space: nowrap;
}
table tr td:nth-child(even) {
    text-align: left;
}
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
.middle-tab-top {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 200px;
}
.middle-bottom {
    position: absolute;
    top: 37px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.middle-tab-bottom {
    position: absolute;
    top: 203px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.pagetop {
    left: 0;
    right: 0;
    height: 215px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    overflow-x: auto;
    white-space: nowrap;
}
.pagebottom {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: 4px;
    height: 36px;
    bottom: 0px;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
}
.middle-right {
    position: absolute;
    top: 0;
    bottom: 0px;
    overflow: visible;
    width: 100%;
    right: 0px;
}

.right-inser {
    position: absolute;
    top: 0;
    bottom: 0px;
    overflow: visible;
    width: 100%;
    right: 0px;
}
</style>